<template>
  <div>
    <vxe-toolbar>
      <template v-slot:buttons>
        <el-button size="mini" @click="removeSelected">删除选中</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTree"
      border
      size="mini"
      resizable
      highlight-hover-row
      highlight-current-row
      highlight-hover-column
      highlight-current-column
      show-overflow
      class="mytable-style"
      :edit-config="{trigger: 'dblclick', mode: 'cell'}"
      :cell-class-name="cellClassName2"
      :data.sync="tableData"
      @cell-click="cellClickEvent2"
      @edit-actived="editActivedEvent"
      @edit-closed="editClosedEvent"
    >
      <vxe-table-column type="selection" width="35"></vxe-table-column>
      <vxe-table-column type="index" width="60" title="索引" :index-method="indexMethod"></vxe-table-column>
      <vxe-table-column field="func" title="通道名称" ></vxe-table-column>
      <vxe-table-column
        field="channeltype"
        title="通道类型"
      ></vxe-table-column>
      <vxe-table-column
        field="address"
        title="通道地址"
         width="100"
        :edit-render="{name: 'input', autoselect: true}"
      ></vxe-table-column>
      <vxe-table-column
        field="quantity"
        title="通道个数"
        width="100"
        :edit-render="{name: 'input', autoselect: true}"
      ></vxe-table-column>
    
    </vxe-table>
  </div>
</template>

<script>
import { 
    findData ,
    updateData,
    delData
} from "@/components/js/db";

const cType = {
  FC1: "[0区] 输出继电器",
  FC2: "[1区] 输入继电器",
  FC3: "[4区] 输出寄存器",
  FC4: "[3区] 输入寄存器"
}
export default {
  data() {
    return {
      tableData: [],
      selectRow: null,
      selectColumn: null
    };
  },
  props: ["watchdata"],
  watch: {
    watchdata: {
      handler: function(val, oldval) {
        if (JSON.stringify(val) === "{}") {
          return false; // 如果为空,返回false
        } else {
          var obj = {};
          obj = JSON.parse(JSON.stringify(val));
          this.tableData.push(obj);
        }
      },
      deep: true,
      immediate: true
    },
    tableData: {
      handler: function(val, oldval) {
        // console.log("tabaledata", val);
      },
      deep: true
    }
  },
  methods: {
    cellClassName2({ row, column }) {
      if ((row === this.selectRow) & (column === this.selectColumn)) {
        return "col-blue";
      }
    },
    removeSelected() {
      this.$refs.xTree.removeSelecteds().then(res => {
        let  delrows = res.rows
        delrows.forEach((item, index) => {
            delData({_id: item._XID})
        })
        // console.log("res", res.rows);
      });
    },
    editActivedEvent({ row, column }, event) {
      // console.log(`打开 ${column.title} 列编辑`);
    },
    editClosedEvent({ row, column }, event) {
        // console.log("dddd", row);
        let data_id = row._XID
        delete row._XID;
        updateData({_id: data_id}, {channel:row})
      // console.log(`关闭 ${column.title} 列编辑`);
    },
    cellClickEvent2({ row, column }) {
      this.selectRow = row;
      this.selectColumn = column;
    },
    indexMethod({ row, rowIndex, column, columnIndex }) {
      return (Array(4).join(0) + rowIndex).slice(-4);
    }
  },
  mounted() {
    findData({
      type: "channel"
    }).then(res => {
      let tmp_arr = res.slice(0);
      tmp_arr.forEach((item, index) => {
        let channel = item.channel;
  
        channel.channeltype = cType[channel.func]
        channel._XID = item._id;
        this.tableData.push(channel);
      });
    });
  }
};
</script>

<style>
.mytable-style.vxe-table .vxe-body--column.col-blue {
  background-color: #409eff;
  color: #fff;
}
.vxe-input--wrapper .vxe-input {
    height: 28px !important;
}
</style>
